<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Search</title>
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="/film/js/jquery.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    <script src="/film/bootstrap/js/typeahead.js"></script>

	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	    </style>
	</head>
	
	<body>
		<jsp:include page="navigationBar.jsp"/>	
		 
		 <div class="container">
			 <div class="content-container">
			 	<c:set var="count" value="0"></c:set>
		 		<c:forEach var="posting" items="${searchResultPostings}">
		 			<c:set var="count" value="${count + 1}"></c:set>
		 			<div class="media">
		 				<div class="media-body">
				 			<div class="tab-content">
								<div class="tab-pane active" id="home">
									<table class="table" border=0>
										<tr>
											<td width=66% border=0>
												<div id="physicalproperties" class="accordion-group">
													<div class="accordion-heading">
														<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#${posting.id}">
														type: ${posting.type}
															<br/>	description: ${posting.description}
														</br>   project: ${posting.project.projectName}
													 
														</a>
													</div>
													<div id="${posting.id}" class="accordion-body collapse">
														<div class="accordion-inner">															
															<table width=100%>	
																<tr>
																	<td width=66%>Project Name:</td>
																	<td><a href="/film/project/getProject.do?pid=${posting.project.id}">${posting.project.projectName}</a></td>
																</tr>															
																<c:set var="frontCam" value="${posting.type == 'actor' or posting.type == 'actress' or posting.type == 'dublour'}"/>
																<c:if test="${frontCam == true}">
																	<tr>
																		<td width=66%>Role Description:</td>
																		<td>
																			${posting.description}
																		</td>
																	</tr>
														 			<tr>
																		<td width=66%>Height:</td>
																		<td>
																			${posting.minHeight} - ${posting.maxHeight} cm
																		</td>
																	</tr>
																	<tr>
																		<td width=66%>Weight:</td>
																		<td>
																			${posting.minWeight} - ${posting.maxWeight} kg
																		</td>
																	</tr>
																	<tr>
																		<td width=66%>Age:</td>
																		<td>
																			${posting.minAge} - ${posting.maxAge}
																		</td>
																	</tr>
																	<tr>
																		<td width=66%>Hair Color:</td>
																		<td>
																			${posting.hairColor}
																		</td>
																	</tr>
																	<tr>
																		<td width=66%>Eye Color:</td>
																		<td>
																			${posting.eyeColor}
																		</td>
																	</tr>
																	<tr>
																		<td width=66%>Additional Physical Description:</td>
																		<td>
																			${posting.physicalDescription}
																		</td>
																	</tr>
																	<tr>
																		<td width=66%>Qualifications:</td>
																		<td>
																			${posting.qualifications}
																		</td>
																	</tr>
														 		</c:if>
														 		<c:if test="${frontCam == false}">
														 			<tr>
																		<td width=66%>Job Description:</td>
																		<td>
																			${posting.description}
																		</td>
																	</tr>
														 			<tr>
																		<td width=66%>Qualifications:</td>
																		<td>
																			${posting.qualifications}
																		</td>
																	</tr>
																</c:if>																
															</table>
														</div>
													</div>
												</div>
											</td>
											
											<td>
												${posting.totalAccepted}/${posting.totalNeeded}
												<c:if test="${posting.totalAccepted < posting.totalNeeded }">
										 			<button class="btn applyButton" postingId="${posting.id}" style="float:right">Apply for this job</button>
										 		</c:if>							
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
					<hr size=3>
		 		</c:forEach>
		 		
		 		<c:if test="${count == 0}">
		 			No suitable job..
		 		</c:if>
		 		
			 	<div class="pagination pagination-centered">
			 		<ul>
			 			<c:if test="${page == null or page == 1}">
				 			<li><a page="1" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1}">
				 			<li><a page="${page - 1}" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page == null or page == 1 or page == 2}">
				 			<li><a page="1" href="#">1</a></li>
							<li><a page="2" href="#">2</a></li>
							<li><a page="3" href="#">3</a></li>
							<li><a page="4" href="#">4</a></li>
							<li><a page="5" href="#">5</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1 and page != 2}">
				 			<li><a page="${page - 2}" href="#">${page - 2}</a></li>
							<li><a page="${page - 1}" href="#">${page - 1}</a></li>
							<li><a page="${page}" href="#">${page}</a></li>
							<li><a page="${page + 1}" href="#">${page + 1}</a></li>
							<li><a page="${page + 2}" href="#">${page + 2}</a></li>
				 		</c:if>
						
						<c:if test="${page == null}">
				 			<li><a page="2" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null}">
				 			<li><a page="${page + 1}" href="#">Next</a></li>
				 		</c:if>
					</ul>
				</div>
			 </div>
	 	</div>
	 	<input type="hidden" id="userType" value="${user.userType}">
	</body>
	
	<script type="text/javascript">
	    $(".pagination a").click(function() {
	    	var page = $(this).attr("page");
	    	window.location.href = ("/film/project/search.do?page=" + page + "&max=" + <%=GeneralConstants.MAXIMUM_POSTING_PAGINATION%>
	    							+ "&userType=" + $("#userType").val());
	    });
	    
	    $(".applyButton").click(function() {
	    	var thisButton = $(this);
			$.ajax("/film/notice/applyJob.do?postingId=" + $(this).attr("postingId")).done(function(data) {
				thisButton.attr("disabled","disabled");
				thisButton.html("Applied...");
				console.log("Your application is successful.");
			});
		});
	</script>
	
	<script src="/film/js/commonScripts.js"></script>
</html>